import React from 'react';
import PropTypes from 'prop-types';
import TodoList from './list';
import TodoItem from './item';
import {connect} from 'react-redux';

@connect(state => ({
  todos: state.todos
}))
export default class Todo extends React.Component {

  static propTypes = {
    onToggle: PropTypes.func,
    onRemove: PropTypes.func
  };

  componentDidMount() {
    // console.log(this.props);
  }

  handleItemClick = (index) => {
    this.props.onToggle && this.props.onToggle(index);
  };

  renderTodoItems() {
    return this.props.todos.list.map((item, index) => {
      const {...others} = item;
      return (
          <TodoItem
              key={index}
              value={index}
              onClick={this.handleItemClick}
              {...others}
          />
      );
    });
  }

  render() {

    console.log(`render <${this.constructor.name}/> once`);

    return (
        <TodoList>
          {this.renderTodoItems()}
        </TodoList>
    );
  }

}
